<template>
    <el-table v-loading="loadPageLoading" :data="clubItems">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="社团名"></el-table-column>
        <el-table-column prop="introduction" label="社团介绍"></el-table-column>
        <el-table-column prop="location" label="社团位置"></el-table-column>
        <el-table-column prop="address" label="社团地址" ></el-table-column>
        <el-table-column prop="primary_color" label="社团主色调"></el-table-column>
        <el-table-column v-if="!disableEdit" label="操作">
            <template #default="scope">
                <el-button-group>
                    <el-button type="primary" @click="jumpToEdit(scope.row)">编辑</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev,pager,next" style="text-align:center" :total="total" :page-size="size" v-model:current-page="page"></el-pagination>
</template>

<script lang="ts">
import { IClubModel } from '@/headers/admin/model.h';
import { RouterName } from '@/router/admin';
import { useAdminStore } from '@/store/admin';
import { GetAllClubsAction } from '@/store/admin/actions/club';
import { useLoadingStatus } from '@/utils';
import { defineComponent, ref, watch } from 'vue'
import { useRouter } from 'vue-router';

export default defineComponent({
    props:{
        disableEdit:{
            type:Boolean,
            default:false,
        }
    },
    setup() {
        const page = ref(1);
        const size = ref(10);
        const total = ref(0);
        const clubItems = ref<IClubModel[]>([]);
        const store = useAdminStore();
        const router = useRouter();
        const {loadingFunc:loadPage,loading:loadPageLoading} = useLoadingStatus(async function() {
            const res = await GetAllClubsAction.getInstance().call(store,{page:page.value-1,size:size.value})
            total.value = res.total_count;
            clubItems.value = res.items;
        })
        watch(page,()=>{
            loadPage();
        },{immediate:true})
        function jumpToEdit(club:IClubModel) {
          console.log(club.id)
            router.push({
                name:RouterName.ClubEdit,
                query:{
                    "club_id":club.id
                }
            });
        }
        return {
            page,
            size,
            total,
            loadPage,
            loadPageLoading,
            clubItems,
            jumpToEdit
        }
    },
})
</script>
